// pages/canvas/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    p_width : '', // 页面宽度
    p_height :'', // 页面高度
    scaleX : 1,
    scaleY : 1,
    filePath :''
  },

  doDraw(){
    var self = this;
    var p_width = self.data.p_width;
    var p_height = self.data.p_height;
    var startX = self.data.p_width * 0.1;
    var startY = self.data.p_height * 0.05;
    const ctx = wx.createCanvasContext('textCav');
      wx.chooseImage({
        success(res) {        
          ctx.drawImage(res.tempFilePaths[0], startX, startY, self.data.p_width *0.8 , self.data.p_height*0.8 );
          ctx.scale(0.8, 0.8);
          ctx.drawImage('../fgrh/f-per-bg.png', startX + p_width * 245 / 600, startY + p_height * 120 / 1154.4, p_width * 130 / 375, p_height * 143 / 1443);
          ctx.drawImage('../fgrh/f-per.png', p_width * 610 / 1500, p_height * 36 / 603, p_width * 125 / 750, p_width * 125 / 750);
          ctx.drawImage('../fgrh/f-txt.png', p_width * 139 / 750, p_height * 123 / 603, p_width * 472 / 750, p_height * 143 / 1443);
          ctx.save()
          ctx.beginPath()
          ctx.moveTo(p_width * 70 / 750 + 10, p_height * 185 / 603)
          ctx.lineTo(p_width * 340 / 750 - 10, p_height * 185 / 603)
          ctx.arc(p_width * 390 / 750 - 10,p_height * 185 / 603 + 10, 10, 1.5 * Math.PI, 2 * Math.PI)
          ctx.lineTo(p_width * 390 / 750 , p_height * 185 / 603 + p_height * 430 / 1334 - 10)
          ctx.arc(p_width * 390 / 750 - 10, p_height * 185 / 603 + p_height * 430 / 1334 - 10, 10, 0, 0.5 * Math.PI)
          ctx.lineTo(p_width * 70 / 750 + 10, p_height * 185 / 603 + p_height * 430 / 1334)
          ctx.arc(self.data.cav_startX + 67.6, p_height * 185 / 603 + p_height * 430 / 1334 - 10, 10, 0.5 * Math.PI, 1 * Math.PI)
          ctx.lineTo(p_width * 70 / 750, p_height * 185 / 603 + 10)
          ctx.arc(p_width * 70 / 750 + 10, p_height * 185 / 603 + 10, 10, 1 * Math.PI, 1.5 * Math.PI)
          ctx.setFillStyle('yellow')
          ctx.fill()
    //     ctx.clip()
    //     ctx.drawImage('../fgrh/gotostudy_bg.jpg', self.data.cav_startX + 55.6, self.data.cav_startY + 147.2, 188.8, 120)
    //     ctx.restore()
    //     ctx.drawImage('../fgrh/f-qrCode.png', self.data.cav_startX + 113.2, self.data.cav_startY + 340.4, 73.6, 84.4);
    //     ctx.setFontSize(10)
    //     ctx.setTextAlign('left')
    //     ctx.setFillStyle('#f9cb7e')
    //     ctx.fillText('春风得意，春安夏泰，春华秋实，春色满园，', self.data.cav_startX + 55.6, self.data.cav_startX + 300)
    //     ctx.fillText('祝你一年四季如春，财源旺，荷包鼓！', self.data.cav_startX + 55.6, self.data.cav_startX + 320)
        
           ctx.draw()
        }
      })

    // ctx.strokeRect(10, 10, 0.5 * this.data.p_width, 0.5 * this.data.p_height)
    // ctx.draw();
  },
  saveImg(){
    var self = this;

    // 生成图片
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: self.data.p_width,
      height: self.data.p_height,
      destWidth: self.data.p_width,
      destHeight: self.data.p_height,
      canvasId: 'textCav',
      success(res) {
        console.log(res.tempFilePath);
        self.setData({
          filePath: res.tempFilePath
        })
      }
    });

    // 保存到相册
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
              wx.saveImageToPhotosAlbum({
                filePath : self.data.filePath,
                success(res) {  console.log(res) }
              })
            }
          })
        } else{
          wx.saveImageToPhotosAlbum({
            filePath: self.data.filePath,
            success(res) { console.log(res) }
          })
        }
      }
    })
  },





  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    try {
      const res = wx.getSystemInfoSync()
      console.log(res.model)
      console.log(res.pixelRatio)
      console.log(res.windowWidth)
      console.log(res.windowHeight)
      console.log(res.language)
      console.log(res.version)
      console.log(res.platform)
      this.setData({
        p_width: res.windowWidth,
        p_height: res.windowHeight,
        cav_startX: res.windowWidth * 0.1,
        cav_startY: res.windowHeight * 0.05,
        cav_endX: res.windowWidth * 0.8,
        cav_endY: res.windowHeight * 0.8,
        scaleX: res.windowWidth / 375,
        scaleY: res.windowHeight / 603
      })
      console.log(this.data.scaleX , this.data.scaleY);
    } catch (e) {
      // Do something when catch error
    }

    wx.createSelectorQuery().select('#textCav').boundingClientRect(function (rect) {
        console.log(rect);
        // rect.id      // 节点的ID
        // rect.dataset // 节点的dataset
        // rect.left    // 节点的左边界坐标
        // rect.right   // 节点的右边界坐标
        // rect.top     // 节点的上边界坐标
        // rect.bottom  // 节点的下边界坐标
        // rect.width   // 节点的宽度
        // rect.height  // 节点的高度
      }).exec()

      var self = this;
      var p_width = self.data.p_width;
      var p_height = self.data.p_height;
      const ctx = wx.createCanvasContext('textCav');

    ctx.drawImage('../fgrh/f-bg.png', 0, 0, p_width, p_height);
    ctx.drawImage('../fgrh/f-per-bg.png', p_width * 245 / 750, p_height * 100 / 1443, p_width * 130 / 375, p_height * 143 / 1443);
    ctx.drawImage('../fgrh/f-per.png', p_width * 610 / 1500, p_height * 30 / 1443, p_width * 125 / 750, p_width * 125 / 750);
    ctx.drawImage('../fgrh/f-txt.png', p_width * 139 / 750, p_height * 230 / 1443, p_width * 472 / 750, p_height * 143 / 1443);
    ctx.save()
    ctx.beginPath()
    ctx.moveTo(p_width * 70 / 750 + 10, p_height * 390 / 1443)
    ctx.lineTo(p_width * 680 / 750 - 10, p_height * 390 / 1443)
    ctx.arc(p_width * 680 / 750 - 10, p_height * 390 / 1443 + 10, 10, 1.5 * Math.PI, 2 * Math.PI)
    ctx.lineTo(p_width * 680 / 750, p_height * 390 / 1443 + p_height * 430 / 1334 - 10)
    ctx.arc(p_width * 680 / 750 - 10, p_height * 390 / 1443 + p_height * 430 / 1334 - 10, 10, 0, 0.5 * Math.PI)
    ctx.lineTo(p_width * 70 / 750 + 10, p_height * 390 / 1443 + p_height * 430 / 1334)
    ctx.arc(p_width * 70 / 750 + 10, p_height * 390 / 1443 + p_height * 430 / 1334 - 10, 10, 0.5 * Math.PI, 1 * Math.PI)
    ctx.lineTo(p_width * 70 / 750, p_height * 390 / 1443 + 10)
    ctx.arc(p_width * 70 / 750 + 10, p_height * 390 / 1443 + 10, 10, 1 * Math.PI, 1.5 * Math.PI)
    // ctx.setFillStyle('yellow')
    // ctx.fill()
    ctx.clip()
    ctx.drawImage('../fgrh/gotostudy_bg.jpg', p_width * 70 / 750, p_height * 390 / 1443, p_width * 610 / 750 , p_height * 430 / 1334)
    ctx.restore()
    ctx.setFontSize(16)
    ctx.setTextAlign('left')
    ctx.setFillStyle('#f9cb7e')
    ctx.fillText('春风得意，春安夏泰，春华秋实，春色满园，', p_width * 70 / 750, p_height * 910 / 1443)
    ctx.fillText('祝你一年四季如春，财源旺，荷包鼓！', p_width * 70 / 750, p_height * 950 / 1443)
    ctx.drawImage('../fgrh/f-qrCode.png', p_width * 283 / 750, p_height * 1050 / 1443, p_width * 184 / 750, p_height * 211 / 1334);
    ctx.draw();

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})